<template>
	<view class="tui-container">
		<weiNoData :visible="isNoData"></weiNoData>
		<template>
			<tui-card class="tui-card" v-for="(item, index) in dataList" :key="index" :titleText="item.act_title" :tagText="item.create_time" @tap="detailAct(item.act_id)">
				<template v-slot:body>
					<view class="tui-article">
						<image :src="$cdn.actCoverImg + item.cover_img" class="tui-article-img"></image>
						<view class="tui-article-title">{{ item.place }}</view>
					</view>
				</template>
			</tui-card>
		</template>

		<tui-tips ref="toast" position="center"></tui-tips>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f2f2f2"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiTips from '@/components/tips/tips';
import weiNoData from '@/components/wei-nodata/wei-nodata.vue';
import tuiGrid from '@/components/grid/grid';
import tuiGridItem from '@/components/grid-item/grid-item';
import tuiCard from '@/components/card/card';

export default {
	computed: mapState(['cityName', 'cityCode', 'latitude', 'longitude']),
	components: {
		tuiIcon,
		tuiTag,
		tuiListCell,
		tuiLoadmore,
		tuiNomore,
		tuiTips,
		tuiGrid,
		tuiGridItem,
		tuiCard,
		weiNoData
	},
	computed: {
		count() {
			return 0;
		}
	},
	beforeCreate() {
		/* 		const domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
		}); */
	},
	data() {
		return {
			$cdn: this.$cdn,
			// 分页必备参数
			isNoData: false,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,

			dataList: [],
			actTypeId: ''
		};
	},
	onLoad: function(e) {
		// 目前在某些平台参数会被主动 decode，暂时这样处理。
		/* 		try {
					this.banner = JSON.parse(decodeURIComponent(event.query));
				} catch (error) {
					this.banner = JSON.parse(event.query);
				} */

		// this.getDetail();

		this.pageActNear(1, false, { lat: this.latitude, lng: this.longitude });
	},
	created() {},
	methods: {
		// 是否展示刷新成功提示
		isShowRefresh(isRefresh) {
			if (isRefresh) {
				let options = {
					msg: '刷新成功',
					duration: 2000,
					type: 'translucent'
				};
				this.$refs.toast.showTips(options);
				// 关闭下拉刷新loading
				uni.stopPullDownRefresh();
			}
		},
		// 获取
		pageActNear(pageIndex, isRefresh, postData) {
			this.tui
				.request(this.$api.pageActNear + '?pageNum=' + pageIndex + '&pageSize=' + this.$api.pageSize, postData, 'POST', false, pageIndex == 1 && !isRefresh ? false : true)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						// 如无数据
						if (res.data.total == 0) {
							this.isNoData = true;
							// 加return 让后面nomore不展示【没有更多了】
							return;
						}

						if (pageIndex == 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = this.dataList.concat(res.data.rows);
							// 隐藏加载更多loading
							this.loadding = false;
						}

						// 如已是最后一条，则提示无加载更多
						if (this.dataList.length >= res.data.total) {
							this.pullUpOn = false;
							this.loadding = false;
						}
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		detailAct(actId) {
			uni.navigateTo({
				url: 'act-detail?actId=' + actId
			});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// 下拉重置页码为第一页
		this.pageIndex = 1;
		this.pageActNear(this.pageIndex, true, { lat: this.lat, lng: this.longitude });
		// 允许下拉和加载更多
		this.pullUpOn = true;
		this.loadding = false;
		// 拉新数据前，先隐藏
		this.isNoData = false;
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		// 显示加载更多loading
		this.loadding = true;
		this.pageActNear(++this.pageIndex, false, { lat: this.lat, lng: this.longitude });
	}
};
</script>

<style>
page {
	background: #f2f2f2;
}

.tui-container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-searchbox {
	padding: 16rpx 20rpx;
	box-sizing: border-box;
}

.tui-rolling-search_container {
	display: flex;
	flex-flow: nowrap;
}

.tui-rolling-search_city {
	width: 20%;
	height: 60rpx;
	line-height: 60rpx;
	/* padding: 0 10rpx 0 0; */
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: hidden;
}

.tui-rolling-search {
	width: 80%;
	height: 60rpx;
	border-radius: 35rpx;
	padding: 0 40rpx 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	color: #999;
}

.tui-swiper {
	font-size: 26rpx;
	height: 60rpx;
	flex: 1;
	padding-left: 12rpx;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-hot-item {
	line-height: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-banner-swiper {
	width: 100%;
	height: 300rpx;
	position: relative;
}

.tui-slide-image {
	width: 100%;
	height: 300rpx;
	display: block;
}

.tui-banner-title {
	width: 100%;
	height: 70rpx;
	position: absolute;
	z-index: 9999;
	color: #fff;
	bottom: 0;
	padding: 0 30rpx;
	padding-top: 16rpx;
	font-size: 26rpx;
	/* font-weight: bold; */
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* #ifdef APP-PLUS || MP */
.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background: #5677fc;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

/* #ifdef H5 */
>>> .tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

>>> .tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
	background: #5677fc;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

.tui-news-flex {
	width: 100%;
	display: flex;
}

.tui-flex-start {
	align-items: flex-start !important;
}

.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column !important;
}

.tui-flex-between {
	justify-content: space-between !important;
}

.tui-news-cell {
	display: flex;
	padding: 20rpx 30rpx;
}

.tui-news-tbox {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	display: flex;
}

.tui-news-picbox {
	display: flex;
	position: relative;
}

.tui-w220 {
	width: 220rpx;
}

.tui-h165 {
	height: 165rpx;
}

.tui-block {
	display: block;
}

.tui-w-full {
	width: 100%;
}

.tui-one-third {
	width: 33%;
}

.tui-news-title {
	width: 100%;
	font-size: 34rpx;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	box-sizing: border-box;
}

.tui-pl-20 {
	padding-left: 20rpx;
}

.tui-pt20 {
	padding-top: 20rpx;
}

.tui-sub-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #999;
	box-sizing: border-box;
	line-height: 24rpx;
}

.tui-sub-source {
	font-size: 26rpx;
}

.tui-sub-cmt {
	font-size: 24rpx;
	line-height: 24rpx;
	display: flex;
	align-items: center;
}

.tui-tag {
	padding: 2rpx 6rpx !important;
	margin-left: 10rpx;
}

.tui-scale {
	transform: scale(0.6);
	transform-origin: center center;
}

.tui-btm-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 24rpx;
	color: #fff;
	padding: 2rpx 12rpx;
	background: rgba(0, 0, 0, 0.6);
	z-index: 20;
	transform: scale(0.8);
	transform-origin: 100% 100%;
}

.tui-video {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
}

.tui-icon {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	padding: 26rpx;
}

.tui-icon-box .tui-icon {
	background: none;
	padding: 0;
	border-radius: 0;
}

/* 	.tui-title {
		padding: 50upx 30upx 30upx 30upx;
		font-size: 32upx;
		color: #333;
		box-sizing: border-box;
		font-weight: bold;
		clear: both;
	} */

/* 	.tui-grid-icon {
		width: 64upx;
		height: 64upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}
	*/
.tui-grid-label {
	display: block;
	text-align: center;
	font-weight: 400;
	color: #333;
	font-size: 24upx;
	white-space: nowrap;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	margin-top: 10upx;
}
.tui-grid-label-5 {
	margin-top: 0 !important;
	color: #5677fc !important;
}

/*classify*/

.tui-classify-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0;
	background-color: #fff;
}

.tui-classify-item {
	width: 20%;
	text-align: center;
}

.tui-classify-item-col4 {
	width: 25%;
	text-align: center;
}

.tui-classify-img-col4 {
	width: 111rpx;
	height: 111rpx;
}

.tui-classify-img {
	width: 88rpx;
	height: 88rpx;
	margin-top: 30rpx;
}

.tui-classify-name {
	font-size: 26rpx;
	line-height: 26rpx;
	padding-top: 8rpx;
	color: #555;
	white-space: nowrap;
}

/*classify*/

/* title */
.example-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	font-weight: bold;
	color: #5677fc;
	padding: 20upx 20upx 20upx 30upx;
	margin-top: 0upx;
	position: relative;
	background-color: #fdfdfd;
	/* border-bottom: 1px #f5f5f5 solid */
}
/* title */

/* card */
.tui-card {
	padding: 10upx 10upx;
	margin: 10rpx 4rpx 24rpx 4rpx !important;
}

.tui-article {
	position: relative;
}

.tui-article-img {
	width: 100%;
	height: 340upx;
	/* display: block; */
}

.tui-article-title {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	font-size: 30upx;
	font-weight: 500;
	/* box-sizing: border-box; */
	padding: 20upx 30upx;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	width: 100%;
}
/* card */
</style>
